<template>
    <div class="box">
        <div class="content">
            <p class="close" @click="$emit('close',false)">x</p>
            <Myswiper :banner="dialogList.banner" class="swiper" />
            <h2>{{ dialogList.name }}</h2>
            <p>{{ dialogList.desc }}</p>
            <p>0糖零卡糖</p>
            <select name="" >
                <option value="">0糖零卡糖</option>
                <option value="">1糖壹卡糖</option>
                <option value="">2糖贰卡糖</option>
            </select>
            <p>绿色喜茶 我们不在提供塑料餐具</p>
            <select name="">
                <option value="">常规吸管</option>
                <option value="">加长吸管</option>
                <option value="">加粗吸管</option>
            </select>
            <div class="btns">
                <p>￥ {{ dialogList.price }}</p>
                <p>
                    <span class="sub" @click="change(dialogList.count - 1)">-</span>
                    <span>{{ count }}</span>
                    <span class="add" @click="change(dialogList.count + 1)">+</span>
                </p>
            </div>
            <button  @click="cart(dialogList)" >加入购物袋</button>
        </div>
    </div>
</template>

<script>
import Myswiper from '../components/Myswiper.vue'
import { mapState, mapMutations } from 'vuex'
// import axios from 'axios'

export default {
    data(){
        return{
            count : 0,
        }
    },
    computed : {
        ...mapState(['dialogList'])
    },
    components : {
        Myswiper
    },
    methods: {
        ...mapMutations(['changeDetail','changeCart']),
        //改变数量
        change(count){
            if(count < 0) return ;
            this.count = count 
            this.changeDetail(count)
        },
        // 点击加入购物车
        cart(item){
            this.$emit('close',false);
            this.changeCart(item);
        }
    },
    mounted(){
        this.count = this.dialogList.count
    }
}
</script>

<style lang="scss" scoped>
    .box{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba($color: #000000, $alpha: .5);
        z-index: 999;
    }
    .content{
        width: 90%;
        height: 90%;
        padding: 20px;
        position: absolute;
        top: 5%;
        left: 5%;
        background: #fff;
        border-radius: 15px;
    }
    .close{
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .3);
        color: #fff;
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 999;
    }
    .swiper{
        width: 100%;
        height: 180px;
    }
    p{
        margin-top: 10px;
    }
    select{
        width: 180px;
        height: 40px;
        padding: 0 10px;
        font-size: 16px;
        border: none;
        background: #eee;
    }
    .btns{
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 10px;
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin: 0 5px;
        }
        .sub{
            border: 1px solid rgb(241, 157, 30);
            color: rgb(241, 157, 30);
        }
        .add{
            background: rgb(241, 157, 30);
            color: #fff;
        }
    }
    button{
        width: 80%;
        height: 40px;
        border-radius: 10px;
        background: rgb(241, 157, 30);
        text-align: center;
        line-height: 40px;
        outline: none;
        border: none;
        margin-left: 10%;
        margin-top: 10px;
    }
</style>